<template>
    <div class="upload">
        <input class="upload-input" type="file" accept="image/gif,image/jpeg,image/jpg,image/png"
               @change="getFile($event)" v-if="!isUploading">
        <template v-if="!uploadImg">
            <div class="upload-btn">
                <img id="upload" src="@assets/upload.png" class="upload-img"/>
                <span>点击上传封面图</span>
            </div>
        </template>
        <template v-else>
            <div class="showImg">
                <img class="uploadImg" :src="uploadImg" alt="" v-if="!isUploading">
                <img v-else :src="uploadImg" alt="" class="loadingImg">
            </div>
        </template>
        
        <div class="tips" v-if="errorText">
            {{errorText}}
        </div>
    </div>
</template>

<script>
    export default {
        name: "UploadImg",
        data() {
            return {
                isUploading: false,
                uploadImg: this.pagePic.img,
                file: '',
                errorText: ''
            }
        },
        props: {
            pagePic: Object
        },
        watch: {
            pagePic(newValue) {
                this.uploadImg = newValue.img
            }
        },
        methods: {
            uploadFile() {
                let formData = new FormData()
                formData.append("strType", "PC") //
                formData.append("file", this.file) //‘file’是後台接收文件名
                let config = {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                }
                this.$upload(formData, null, config).then(res=> {
                    this.isUploading = false
                    this.uploadImg = 'https://' + res.data.url + '/' + res.data.key
                        + "?"+ "imageMogr2/auto-orient/thumbnail/690x/format/jpg/blur/1x0/quality/75|watermark/1/image/aHR0cHM6Ly95dW4ubGlua3dpbm5pbmcuY29tL25hdkAyeC5wbmc=/dissolve/100/gravity/SouthEast/dx/24/dy/16|imageslim"
                    let obj = {img: this.uploadImg, width: res.data.width, height: res.data.height}
                    this.errorText = false
                    this.$emit('uploadFile', obj)
                }).catch(err => {
                    this.errorText = err.msg
                    this.isUploading = false
                })
            },
            getFile(event) {
                this.file = event.target.files[0]
                this.submitForm(event)
                this.isUploading = true
                this.uploadImg = require('@assets/loading.gif')
            },
            submitForm(event) {
                event.preventDefault()
                let self = this
                // let type = this.file.type //文件的类型，判断是否是图片
                let size = this.file.size //文件的大小，判断图片的大小
                
                if (size > 10485760) {
                    alert('请选择10M以内的图片！')
                    return false
                }
                
                // 获取 window 的 URL 工具
                var URL = window.URL || window.webkitURL
                // 通过 file 生成目标 url
                let imgURL = URL.createObjectURL(this.file)
                // this.uploadImg = imgURL
                
                this.uploadFile()
            }
        }
    }
</script>

<style lang="less" scoped>
    .upload {
        position: relative;
        width: 260px;
        height: 195px;
        margin-left: 20px;
        background: rgba(0, 0, 0, .04);
        border-radius: 4px;
        cursor: pointer;
        &::before {
            position: absolute;
            top: 18px;
            left: -20px;
            content: '';
            display: block;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(250, 100, 0, 1);
        }
        .upload-input {
            position: absolute;
            width: 260px;
            height: 195px;
            opacity: 0;
            cursor: pointer;
        }
        
        .upload-btn {
            padding-top: 68px;
            
            img {
                display: block;
                width: 34px;
                height: auto;
                margin: 0 auto 16px;
            }
            
            span {
                display: block;
                font-size: 12px;
                font-weight: 400;
                color: rgba(0, 0, 0, .4);
                line-height: 17px;
                text-align: center;
            }
        }
        
        .showImg {
            width: 260px;
            height: 195px;
            overflow: hidden;
            .uploadImg {
                display: block;
                width: 260px;
                height: auto;
            }
            .loadingImg {
                display: block;
                margin: 0 auto;
                transform: translateY(50%);
                width: 80px;
                height: auto;
            }
        }
        
        .tips {
            position: absolute;
            bottom: 5px;
            left: 300px;
            width: 300px;
            font-size: 12px;
            font-weight: bold;
            color: rgba(224, 32, 32, 1);
            line-height: 17px;
        }
    }
</style>
